<template>
  <a-card :bordered="false">
    <a-row :gutter="8">
      <a-col :span="24">
        <div>
          <div class="org-table-operations">
            <a-button type="primary" icon="plus" @click="handleOrdAdd()">新增单位</a-button>
          </div>
          <a-table
            :columns="columns"
            :rowKey="record => record.pid"
            :dataSource="orgsData"
            :pagination="paginations"
            @change="onChange"
          >
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleOrdEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="handleOrdCancel(record)">注销</a>
              </template>
            </span>
          </a-table>
        </div>
      </a-col>
    </a-row>
    <org-modal ref="modal" @ok="handleOrgModalSaveOk" @close="handleOrgModalCancel" />
  </a-card>
</template>

<script>
import OrgModal from './modules/OrgModal'
import { getOrgList, getOrgCount } from './org'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

export default {
  name: 'Organization',
  components: {
    // STable,
    // STree,
    OrgModal
  },
  data () {
    return {
      // 中文
      locale: zhCN,
      // 表头
      columns: [
        // {
        //   title: '#',
        //   dataIndex: 'no'
        // },
        {
          title: '单位代码',
          dataIndex: 'orgCode'
        },
        {
          title: '单位简称',
          dataIndex: 'orgName',
          needTotal: true
          // needTotal: true,
          // customRender: (text) => text + ' 次'
        },
        {
          title: '单位俗称',
          dataIndex: 'orgPopularName',
          needTotal: true
        },
        {
          title: '成立日期',
          dataIndex: 'updatedAt',
          sorter: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 单位列表数据
      orgsData: [],
      paginations: {
        showSizeChanger: true,
        showQuickJumper: true,
        // defaultCurrent: 1,
        current: 1,
        total: 0,
        pageSize: 10
      },
      orgModal: false,
      // orgTree: [],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  created () {
    // this.fetch()
  },
  mounted () {
    this.getOrgDatas()
  },
  methods: {
    getOrgDatas (params = {}) {
      this.loading = true
      const headers = {
        'authOption': '1'
      }
      const param = {
        currentPage: this.paginations.current,
        pageSize: this.paginations.pageSize
      }
      getOrgList(Object.assign(param, params), headers)
        .then(res => {
          this.orgsData = res.data
          this.loading = false
        })
      getOrgCount(params, headers)
        .then(res => {
          this.paginations.total = res.data
          this.paginations.showTotal = this.showTotal
          this.loading = false
        })
    },
    handleClick (e) {
      this.queryParam = {
        key: e.key
      }
      this.$refs.table.refresh(true)
    },
    // handleAdd (item) {
    //   this.$message.info(`提示：你点了 ${item.key} - ${item.title} `)
    //   this.$refs.modal.add(item.key)
    // },
    handleTitleClick (item) {
      console.log('handleTitleClick', item)
    },
    titleClick (e) {
      console.log('titleClick', e)
    },
    // 新增单位
    handleOrdAdd () {
      // console.log('handleOrdAdddddddddddddddddddd')
      this.$refs.modal.showAddModal()
      // this.$refs.modal.theOrgPid = ''
      // this.$refs.modal.visible = true
    },
    // 编辑单位信息按钮
    handleOrdEdit (record) {
      this.$refs.modal.showEditModal(record.pid)
      console.log(record)
    },
    // 注销单位按钮
    handleOrdCancel (record) {
      console.log(record)
    },
    // 总条数
    showTotal (total) {
      return `共 ${total} 条`
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 翻页等
    onChange (params) {
      // this.loading = true
      // const headers = {
      //   'authOption': '1'
      // }
      // const param = {
      //   currentPage: params.current,
      //   pageSize: params.pageSize
      // }
      // console.log('params', params)
      this.paginations.current = params.current
      this.paginations.pageSize = params.pageSize
      // console.log('paginations', this.paginations)
      this.getOrgDatas()
      // getOrgList(Object.assign(param), headers)
      //   .then(res => {
      //     this.orgsData = res.data
      //     this.loading = false
      //   })
    },
    // 编辑框ok
    handleOrgModalSaveOk () {
      // console.log('handleOrgModalSaveOkccccccccccccccccc')
      this.getOrgDatas()
    },
    // 编辑框ok
    handleOrgModalCancel () {
      console.log('handleOrgModalCancelccccccccccccccccc')
    }
  }
}
</script>

<style lang="less">
  .org-table-operations {
    margin-bottom: 16px;
  }
  .org-table-operations > button {
    margin-right: 8px;
  }
  .custom-tree {

    /deep/ .ant-menu-item-group-title {
      position: relative;
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .ant-menu-item {
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .btn {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      width: 20px;
      height: 40px;
      line-height: 40px;
      z-index: 1050;

      &:hover {
        transform: scale(1.2);
        transition: 0.5s all;
      }
    }
  }
</style>
